---
title: App Tooltip
image: /images/user-guide/tips/light-bulb.png
---

<Frame>
  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
</Frame>

Kullanıcı bir öğeyle etkileşimde bulunduğunda ek bilgi gösteren kısa bir mesaj.

<Tabs>
<Tab title="Usage">

```jsx
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Customer Insights
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Explore customer behavior and preferences"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler       | Tür                                           | Açıklama                                                                                                                                                                                                                                       |
| ---------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| sınıfAdı         | metin                                         | Ek stil tanımlamaları için isteğe bağlı CSS sınıfı                                                                                                                                                                                             |
| anchorSelect     | CSS seçici                                    | Tooltip'in bağlantı elementi için seçici (tooltip'i tetikleyen öğe)                                                                                                                                                         |
| içerik           | metin                                         | Tooltip içinde göstermek istediğiniz içerik                                                                                                                                                                                                    |
| delayHide        | sayı                                          | İmleç bağlantıdan ayrıldıktan sonra tooltip'in gizlenmesi için beklenen süre (saniye)                                                                                                                                       |
| offset           | sayı                                          | Tooltip'in konumlandırılması için piksel cinsinden ofset                                                                                                                                                                                       |
| noArrow          | boolean                                       | `doğru` ise, tooltip'teki oku gizler                                                                                                                                                                                                           |
| isOpen           | boolean                                       | `doğru` ise, tooltip varsayılan olarak açıktır                                                                                                                                                                                                 |
| place            | `react-tooltip`'dan `PlacesType` string       | Tooltip'in yerleşimini belirtir. Değerler şunları içerir: `alt`, `sol`, `sağ`, `üst`, `üst-başlangıç`, `üst-bitiş`, `sağ-başlangıç`, `sağ-bitiş`, `alt-başlangıç`, `alt-bitiş`, `sol-başlangıç` ve `sol-bitiş` |
| positionStrategy | `react-tooltip`'dan `PositionStrategy` string | Tooltip'in pozisyon stratejisi. Has two values: `absolute` and `fixed`                                                                                                                                         |

</Tab>

</Tabs>

## Tooltip ile Taşan Metin

Taşan metinleri ele alır ve metin taştığında bir tooltip gösterir.

<Tabs>
<Tab title="Usage">

```jsx
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';

  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
```

</Tab>

<Tab title="Props">

| Özellikler | Tür   | Açıklama                                          |
| ---------- | ----- | ------------------------------------------------- |
| metin      | metin | Taşan metin alanında göstermek istediğiniz içerik |

</Tab>

</Tabs>
